<template>
  <div>
    <!-- 信息管理 -->
    <!-- 按钮上面的导航 -->
    <!-- <el-row style="margin: 18px 0px 0px 18px "> -->
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>通知管理</el-breadcrumb-item>
        <el-breadcrumb-item>通知管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <!-- 搜索与添加按钮 -->
    <div style="margin-top: 15px; margin-left: 12px;">
       <el-select v-model="queryKey5" style="width: 150px;float:left;"  slot="prepend" placeholder="请选择发送方式">
          <el-option label="" value=""></el-option>
          <el-option label="短信" value="1"></el-option>
           <el-option label="邮箱" value="0"></el-option>
        </el-select>
        <el-select v-model="queryKey4" style="width: 150px;float:left;"  slot="prepend" placeholder="请选择发送状态">
          <el-option label="" value=""></el-option>
          <el-option label="发送成功状态" value="1"></el-option>
           <el-option label="发送失败状态" value="0"></el-option>
        </el-select>
         <el-input
        style="width: 200px;float:left;"
        placeholder="请输入内容"
        v-model="queryKey3"
        clearable
      ></el-input>
      <el-input
        style="width: 200px;float:left;"
        placeholder="请输入主题"
        v-model="queryKey2"
        clearable
      ></el-input>
      <div v-permission="'sysMessageUsernameButton'">
        <el-input
          placeholder="请输入接收用户名"
          v-model="queryKey1"
          style="width: 200px;float:left;"
          clearable
        ></el-input>
      </div>
      <el-button style="float:left;" type="primary" @click="loadThis()" icon="el-icon-search">搜索</el-button>
      <el-button style="float:left;" type="primary" icon="el-icon-refresh" @click="load()" >刷新</el-button>
    </div>

    <!-- 引入的添加/修改组件  组件名叫BannerCreate  就用 banner-creat -->
    <div v-permission="'sysMessageAddButton'">
      <mess-add @onSubmit="add()" ref="edit"></mess-add>
    </div>

    <el-card style="margin: 15px 1%;width: 98%">
      <el-table :data="datalist" border style="width: 100%" :max-height="tableHeight">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="id" width="55" label="id"></el-table-column>
        <el-table-column prop="receiveUsername" width="100" label="接收用户" fit></el-table-column>
        <el-table-column prop="receiveNum" label="接收人账号" fit></el-table-column>

        <el-table-column
          prop="sendType"
          label="发送方式"
          sortable
          width="65">
          <template slot-scope="scope">
            <div v-if="scope.row.sendType === 0">
              <el-tag>邮箱</el-tag>
            </div>
            <div v-if="scope.row.sendType === 1">
              <el-tag type="warning">短信</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="subject" label="主题" fit></el-table-column>
        <el-table-column prop="content" label="内容" sortable fit></el-table-column>
        <el-table-column prop="filename" label="附件" fit>
          <template slot-scope="scope">
            <div v-if="scope.row.filename === '' ">
              <el-tag>无附件</el-tag>
            </div>
            <div v-else>
              {{scope.row.filename}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" width="100" label="操作时间"></el-table-column>
        <el-table-column prop="sendUsername" width="100" label="操作人" fit></el-table-column>

        <el-table-column
          prop="isSuccess"
          label="发送状态"
          sortable
          width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.isSuccess === 0">
              <el-tag type="danger">发送失败</el-tag>
            </div>
            <div v-if="scope.row.isSuccess === 1">
              <el-tag type="success">发送成功</el-tag>
            </div>
          </template>
        </el-table-column>

      </el-table>
      <div style="margin: 20px 0 50px 0">
        <el-pagination
          background
          style="float:right;"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import MessAdd from './MessAdd'
export default {
  name: 'Message',
  // 引入之后 使用 banner-create 进行使用
  components: { MessAdd },
  data () {
    return {
      datalist: [],
      queryKey1: '',
      queryKey2: '',
      queryKey3: '',
      queryKey4: '',
      queryKey5: '',
      pageSize: 10,
      total: 0
    }
  },
  mounted () {
    this.loadThis()
  },
  computed: {
    tableHeight () {
      // table  card的高度
      return window.innerHeight - 300
    }
  },
  methods: {
    load () {
      // 刷新清空搜索框的值
      // eslint-disable-next-line no-unused-expressions
      this.queryKey1 = ''
      this.queryKey2 = ''
      this.queryKey3 = ''
      this.queryKey4 = ''
      this.queryKey5 = ''
      this.loadThis()
    },
    loadThis () {
      var _this = this
      this.$axios.post('/admin/message/' + this.pageSize + '/1?queryKey1=' + this.queryKey1 + '&queryKey2=' + this.queryKey2 +
           '&queryKey3=' + this.queryKey3 + '&queryKey4=' + this.queryKey4 + '&queryKey5=' + this.queryKey5).then(resp => {
        if (resp && resp.data.code === 200) {
          _this.datalist = resp.data.result.content
          _this.total = resp.data.result.totalElements
           this.$message({
              type: 'success',
              message: '刷新成功'
            })
        } else {
          // 从后端返回错误信息
            this.$alert('<p style=" color:#F00;">' + resp.data.message + '</p>', '错误提示', {
              dangerouslyUseHTMLString: true
            })
        }
      })
    },
    handleCurrentChange (page) {
      var _this = this
      this.$axios.post('/admin/message/' + this.pageSize + '/' + page + '?queryKey1=' + this.queryKey1 + '&queryKey2=' + this.queryKey2 +
           '&queryKey3=' + this.queryKey3 + '&queryKey4=' + this.queryKey4 + '&queryKey5=' + this.queryKey5).then(resp => {
        if (resp && resp.data.code === 200) {
          _this.datalist = resp.data.result.content
          _this.total = resp.data.result.totalElements
        } else {
              // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
                type: 'error',
                dangerouslyUseHTMLString: true
              })
        }
      })
    }
  }
}
</script>

<style scoped>
.add-link {
  margin: 18px 0 15px 10px;
  float: left;
}
</style>
